<template>
    <el-table
      :data="getter(rows)"
      row-id="id"
      row-key="id"
      default-expand-all
      border
      class="param-table"
    >
    <el-table-column
      :tree-node="true"
      v-if="isColumnShow('name')"
      prop="name"
      :label="nameLabel"
      :width="nameWidth"
    >
      <template slot-scope="scope">
        <span v-if="isTextColumn('name')">
          {{ scope.row.name }}
        </span>
        <el-form
          v-else
          :ref="`form_name_${scope.row.id}`"
          :model="scope.row"
          :rules="paramRowRule"
          size="mini"
          style="display: inline-block;width: 220px;"
          :class="hasNoParentAndChildren(scope.row) ? 'el-table--row-no-parent-children' : ''"
          @submit.native.prevent
        >
          <el-form-item
            prop="name"
            label-width="0"
          >
          <WeInput :value="scope.row.name" :size="'mini'" @change="(val) =>onWeChange(val,scope.row,'name')" :placeholder="$t('paramName')" :maxlength="64" :showWordLimit="true"/>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      v-if="isColumnShow('type')"
      prop="type"
      :label="$t('type')"
      width="130"
    >
      <template slot-scope="scope">
        <WeSelect :type="'arr'" :value="scope.row.type" @change="(val) =>onWeChange(val,scope.row,'type')" :filterable="true" :allowCreate="true" :list="configTypes" :clearable="false" :size="'mini'"/>
      </template>
    </el-table-column>
    <el-table-column
      v-if="isColumnShow('enum')"
      prop="enum"
      :label="$t('linkDict')"
      width="120"
    >
      <template slot-scope="scope">
        <WeSelect :type="'obj'" :value="scope.row.enumId" @change="(val) =>onWeChange(val,scope.row,'enumId')" :filterable="true" :allowCreate="false" :list="enumData" :clearable="true" :size="'mini'"/>
      </template>
    </el-table-column>
    <el-table-column
      v-if="isColumnShow('required')"
      prop="required"
      :label="$t('require')"
      width="80"
    >
      <template slot-scope="scope">
        <WeSwitch :value="scope.row.required" @change="(val) =>onWeChange(val,scope.row,'required')" :activeColor="'#13ce66'" :activeValue="1" :inactivealVue="0"/>
      </template>
    </el-table-column>
    <el-table-column
      v-if="isColumnShow('maxLength')"
      prop="maxLength"
      :label="$t('maxLength')"
      width="130"
    >
      <template slot-scope="scope">
        <WeInput :value="String(scope.row.maxLength)" @change="(val) =>onWeChange(val,scope.row,'maxLength')" :placeholder="$t('maxLength')" :size="'mini'" :maxlength="10" :showWordLimit="true"/>
      </template>
    </el-table-column>
    <el-table-column
      v-if="isColumnShow('description')"
      prop="description"
      :label="descriptionLabel"
    >
      <template slot-scope="scope">
        <el-form :ref="`form_description_${scope.row.id}`" :model="scope.row" :rules="paramRowRule" size="mini" @submit.native.prevent>
          <el-form-item
            prop="description"
            label-width="0"
          >
          <WeInput :value="scope.row.description" :size="'mini'" @change="(val) =>onWeChange(val,scope.row,'description')" :placeholder="descriptionLabel" :showWordLimit="false"/>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      v-if="isColumnShow('example')"
      prop="example"
      :label="exampleLabel"
    >
      <template slot-scope="scope">
        <WeInput :value="scope.row.example" :size="'mini'" @change="(val) =>onWeChange(val,scope.row,'example')" :placeholder="exampleLabel" :showWordLimit="false"/>
      </template>
    </el-table-column>
    <el-table-column
      prop="orderIndex"
      :label="$t('orderIndex')"
      width="125"
    >
      <template slot-scope="scope">
        <el-input-number
          v-model.lazy="scope.row.orderIndex"
          controls-position="right"
          size="mini"
          style="width: 100px"
          @change="(val) =>onWeChange(val,scope.row,'orderIndex')"
        />
      </template>
    </el-table-column>
    <el-table-column
      v-if="isColumnShow('opt')"
      :label="$t('operation')"
      width="90"
    >
      <template slot-scope="scope">
        <div>
          <div v-show="scope.row.isDeleted === 0">
            <el-tooltip :content="$t('addChildNode')" placement="top" :open-delay="500">
              <el-link v-if="canAddNode" type="primary" icon="el-icon-circle-plus-outline" @click="onParamNodeAdd(scope.row)"></el-link>
            </el-tooltip>
            <el-link type="danger" icon="el-icon-delete" @click="onParamRemove(scope.row)"></el-link>
          </div>
          <div v-show="scope.row.isDeleted === 1">
            <el-tooltip :content="$t('clickRestore')" placement="top">
              <el-link type="danger" icon="el-icon-remove" @click="scope.row.isDeleted = 0"></el-link>
            </el-tooltip>
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import WeInput from "./input.vue"
import WeSwitch from "./switch.vue"
import WeSelect from "./select.vue"
export default {
  name: 'EditTable',
  components:{WeInput,WeSwitch,WeSelect},
  props: {
    data: {
      type: Array,
      default: () => []
    },
    moduleId: {
      type: String,
      default: ''
    },
    emptyText: {
      type: String,
      default: $t('noData')
    },
    canAddNode: {
      type: Boolean,
      default: true
    },
    nameLabel: {
      type: String,
      default: $t('name')
    },
    nameWidth: {
      type: Number,
      default: 300
    },
    textColumns: {
      type: Array,
      default: () => []
    },
    descriptionLabel: {
      type: String,
      default: $t('description')
    },
    exampleLabel: {
      type: String,
      default: $t('example')
    },
    hiddenColumns: {
      type: Array,
      default: () => []
    },
    getter: {
      type: Function,
      default: (rows) => { return rows.filter(row => !row.hidden) }
    }
  },
  data() {
    return {
      rows: [],
      enumData: [],
      configTypes: [],
      paramRowRule: {
        name: [
          { required: true, message: $t('notEmpty'), trigger: ['blur', 'change'] }
        ]
      },
      newData:[],
      scrollTOP:0,
      scrollTOP1:0,
      pagingScrollTopLeft:{
        height:500,top:500,left:100,width:100
      }
    }
  },
  watch: {
    data(val) {
      this.rows = val
      this.newData = JSON.parse(JSON.stringify(this.rows))
    },
  },
  mounted() {
    this.rows = this.data
    this.newData = JSON.parse(JSON.stringify(this.rows))
    if (this.moduleId) {
      this.loadEnumData(this.moduleId, data => {
        this.enumData = data
      })
      this.pmsFrontConfig('front.param.type-array').then(value => {
        this.configTypes = value ? JSON.parse(value) : this.getTypeConfig()
      })
    }
  },
  methods: {
    isColumnShow(label) {
      return this.hiddenColumns.filter(lb => lb === label).length === 0
    },
    isTextColumn(name) {
      return this.textColumns.filter(val => val === name).length > 0
    },
     onParamNodeAdd(row) {
      const children = row.children || []
      let child = this.getParamNewRow()
      child.parentId = row.id
     // children.push(child)
       children.unshift(child)
      row.children = children
    },
    onParamRemove(row) {
      if (row.isNew) {
        this.removeRow(this.data, row.id)
      } else {
        row.isDeleted = 1
      }
    },
    getData() {
      return this.rows
      return this.newData
    },
    onWeChange(val,row,code){
      this.rows.forEach(e => {
        if(e.id === row.id){
          e[code] = val
        }
        if(e.children && e.children.length > 0){
          this.setChildren(val,row,code,e.children)
        }
      })
    },
    setChildren(val,row,code,rows){
      rows.forEach(e => {
        if(e.id === row.id){
          e[code] = val
        }
        if(e.children.length > 0){
          this.setChildren(val,row,code,e.children)
        }
      })
    },
    validate() {
      return this.validateTable(this.rows, ['form_name_'])
    }
  }
}
</script>
<style scoped>
.param-table .el-table--row-no-parent-children {
  padding-left: 23px !important;
}
</style>
